<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/suosou.css?v=1.0" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script>
			// 重写注入代码的方法，让注入代码使用此方法时出错
			String.fromCharCode = function(arg) {return true}
		</script>
	</head>
	<style>
		.lishi{
			position:absolute;
			z-index: 999;
			width: 100%;
			top: 20px;
		}
		.lishi div{
			border:1px solid black ;
			border-top:none ;
			padding: 5px;
		}
	</style>
	<body>
		<div class="container" id="vue-container">
			<div class="top">
				<div class="header">
					<img src="img/search-icon.png">
					<form @submit="search_title($event)">
						<input id="input" v-model="search.title"  autofocus="autofocus" type="search" placeholder="搜索书名">
					</form>
					<!--<div class="lishi">
						<div>历史记录</div>
					</div>-->
				</div>
				<div class="quxiao"><a href="index.html?love">取消</a></div>
				
			</div>
			<div class="remen">
				<div class="tit">热门搜索</div>
				<div class="shuname">
					
				</div>
			</div>
			<div class="shuji">
				<div class="intro" v-for="book in books">
					<a :href="'book_details.html?id=' + book.ID">
						<div class="intro_tu">
							<img :src="init_image(book.Image)">
						</div>
						<div class="intro_right">
							<p class="intro_title">{{book.Title}}</p>
							<p class="intro_intro">{{book.Description}}</p>
							<span class="intro_fenlei">{{get_tag_name(book.TagID)}}</span>
						</div>
					</a>
				</div>
				<div class="tishi"></div>
			</div>
			<div class="head">
				<div class="title">畅销书单</div>
				<div class="changxiao_content content">
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/local.js" ></script>
	<script>
		window.onload = function(){ 
	　　	 	$("#input").trigger("click").focus();
	　　}; 
		//热门搜索
		$.ajax({
			type:"get",
			url:host+"/books?Order=admin_rec%20desc&Sex=1&Limit=7&Offset=0",
			datatype:"json",
			success:function(data){
				if(!!data.list){
					var div="";
					for (var i=0;i<data.list.length;i++) {
						var id=data.list[i].ID;
						var name=data.list[i].Title;
						 div+='<div>'+name+'</div>';
						$(".shuname").html(div);
						$(".shuname div").click(function(){
							var tet=$(this).text();
							$(".header input").val(tet);
							vu.search.title=tet;
							vu.dian_title();
						})
					}
				}
			}
		})
		//畅销榜单
		$.ajax({
			type:"get",
			url:host+"/books?Order=user_rec%20desc&Sex=1&Limit=12&Offset=0",
			datatype:"json",
			success:function(data){
				if(!!data.list){
					var div="";
					for (var i=0;i<data.list.length;i++) {
						var id=data.list[i].ID;
						var name=data.list[i].Title;
						var Image=data.list[i].Image;
						 div+='<div><a href="book_details.html?id='+id+'"><img src="'+host+'/'+Image+'"></a><p>'+name+'</p></div>';
						$(".changxiao_content").html(div);
					}
				}
			}
		})
		//提取本地储存数据
//		var jilu=localStorage.getItem('search');
//	  		jilu=jilu?JSON.parse(jilu):[];
		//搜索框搜索
		var vu=new Vue({
			el: "#vue-container",
			data: {
				search: {
					title:"",
					tag_id: 0, // 标签 ID 
				},
				tags: [], // 所有的分类列表
				books: [], // 显示的图书列表
			},
			created: function() {
				let self = this;

				$.get(host + "/book-tags", function(data) {
					if(!!data.list) {
						self.tags = data.list;
					}
				})
			},
			methods: {
				//输入框搜索
				search_title: function(evt) {
					let self = this;
					this.books
					evt.preventDefault();
					if(!!self.search.title) {
						$.get(host + "/search-books?Title=" + self.search.title, function(data){
							//本地储存
//							if (typeof(Storage) !== "undefined") {
//								var tet=$("#input").val();
//								console.log(tet);
//						         if(jilu.indexOf(tet)==-1){
//						             jilu.push(tet);
//						             console.log(jilu);
//						         }
//						         localStorage.setItem('search',JSON.stringify(jilu));
//							}
							if(!!data.list) {
								if(data.list.length!=0){
									self.books = data.list;
									$(".shuji").show();
									$(".head").hide()
									$(".remen").hide();
									$(".tishi").html(" ");
								}else{
									self.books = []
									$(".tishi").html("没有搜索到，换个关键字吧");
								}
								if(data.list.length==0){
									$(".shuji").show();
									$(".head").hide()
									$(".remen").hide();
									$(".tishi").html("没有搜索到，换个关键字吧");
								}
							}
						})
					} else {
						alert("请输入关键字")
					}
				},
				//点击热门搜索
				dian_title: function() {
					let self = this;
					this.books
					if(!!self.search.title) {
						$.get(host + "/search-books?Title=" + self.search.title, function(data){
							//本地存储
//							if (typeof(Storage) !== "undefined") {
//								var tet=$("#input").val();
//								console.log(tet);
//						         if(jilu.indexOf(tet)==-1){
//						             jilu.push(tet);
//						             console.log(jilu);
//						         }
//						         localStorage.setItem('search',JSON.stringify(jilu));
//							}
							if(!!data.list) {
									self.books = data.list;
									$(".shuji").show();
									$(".head").hide()
									$(".remen").hide();
									$(".tishi").html(" ");
							}
						})
					} 
				},
				// 开始搜索
				init_image: function(url) {
					return host + "/" + url
				},
				get_tag_name: function(tag_id) {
					for(let i = 0, ln = this.tags.length; i < ln; i++) {
						let tag = this.tags[i];
						if(tag.ID === tag_id) {
							return tag.Name
						}
					}
				}
			}
		})
//		$("#input").focus(function(){
//	  		console.log(jilu)
//			console.log(jilu.length)
//			for (var i=0;i<jilu.length;i++) {
//				console.log(jilu[i]);
//			}
//		})
</script>
</html>
